<?php
    $pagesize = $args['pagesize'] ?? 10;
?>
<div class='cti1'>
    <section class="i1">
        <?php
        $random_posts = get_random_posts($pagesize);
        foreach ($random_posts as $post) {
        ?>
            <a class="grid" href="<?= $post['link'] ?>" title="<?= $post['title'] ?>">
                <img src="<?= $post['thumbnail'] ?>" alt="<?= $post['title'] ?>">
                <section class="grid">
                    <h3 class="nowrap2"><?= $post['title'] ?></h3>
                </section>
            </a>
        <?php
        }
        ?>
    </section>
</div>

<style>
     div.cti1 {
        container-type: inline-size;
        container-name: i1;
    }
    section.i1 {
        display: grid;
        grid-template-columns:  1fr 1fr 1fr 1fr;
        gap: var(--gap);
    }

    section.i1>a {
        grid-template-columns: auto;
        position: relative;
        border: 1px solid var(--color-border);
        border-radius: var(--border-radius);
        transition: var(--transition);
        background-color: var(--color-primary);
    }

    section.i1>a>img {
        width: 100%;
        height: 14rem;
    }

    section.i1>a:nth-child(3) {
        grid-column: 3/5;
    }

    section.i1>a:nth-child(4) {
        grid-column: 1/3;
    }

    section.i1>a:nth-child(3)>img,
    section.i1>a:nth-child(4)>img {
        height:100%;
        max-height: 24rem;
    }

    section.i1>a:nth-child(3)>section,
    section.i1>a:nth-child(4)>section {
        position: absolute;
        right: 0;
        bottom: var(--gap);
        background-color: white;
        width: 80%;
    }
    section.i1>a>section{
        padding: var(--gap);
    }
    section.i1>a>img:hover,
    section.i1>a>section:hover {
        cursor: pointer;
    }

    @container i1 (max-width: 1200px) {
        section.i1>a>img {
            height: 12rem;
        }
        section.i1>a:nth-child(3)>img,
        section.i1>a:nth-child(4)>img {
            height: 18rem;
        }
    }

    @container i1 (max-width: 1024px) {
        section.i1>a {
            grid-template-columns: auto;
        }

        section.i1>a>img {
            height: 12rem;
        }

        section.i1>a:nth-child(3)>img,
        section.i1>a:nth-child(4)>img {
            height: 12rem;
        }

        section.i1>a:nth-child(3)>section,
        section.i1>a:nth-child(4)>section {
            position: relative;
            right: auto;
            bottom: auto;
            background-color: none;
            width: auto;
        }
    }

    @container i1 (max-width: 768px) {
        section.i1 {
            grid-template-columns: 1fr 1fr 1fr;
        }

        section.i1>a:nth-child(3) {
            grid-column: auto;
        }

        section.i1>a:nth-child(4) {
            grid-column: auto;
        }

        section.i1>a:nth-child(3)>img,
        section.i1>a:nth-child(4)>img {
            height: 16rem;
        }

        section.i1>a>img {
            height: 16rem;
        }
    }

    @container i1 (max-width: 576px) {
        section.i1 {
            grid-template-columns: 1fr;
        }
    }
</style>